<template>
	<z-paging
		show-refresher-update-time
		show-refresher-when-reload
		v-model="shifuList"
		bg-color="#f5f5f5"
		class="app app-bg"
		ref="paging"
		:auto="false"
		@query="queryList"
	>
		<view class="search" slot="top">
			<u-input
				placeholder="请输入技师姓名搜索"
				v-model="name"
				type="text"
				clearable
				@input="inputing"
				@confirm="search"
			/>
			<image src="@/static/icon/icon-search.png" class="btn" @tap="search"></image>
		</view>
		<block v-for="item in shifuList" :key="item._id">
			<shifu-item
				:sid="sid"
				:info="item"
				:from="from"
				:btnText="btnText"
				@jump="jump"
				@check="check"
			></shifu-item>
		</block>
	</z-paging>
</template>

<script>
var vk = uni.vk // vk依赖
import shifuItem from "@/pages/index/components/shifu-item.vue"

export default {
	components: { shifuItem },
	data() {
		return {
			from: "",
			btnText: "立即预约",
			sid: "",
			name: "",
			lonlat: null,
			style: { fontSize: "26rpx", marginRight: "28rpx" },
			shifuList: []
		}
	},
	onLoad(options = {}) {
		if (options.id) this.sid = options.id
		if (options.from) this.from = options.from
		if (options.btnText) this.btnText = options.btnText

		this.$nextTick(() => {
			this.checkAddress()
		})
	},
	methods: {
		// 地址
		checkAddress() {
			let adr = vk.getStorageSync("adr")
			if (!adr) {
				vk.confirm("需要获取当前位置已用于计算距离，请开启权限", res => {
					if (res.confirm) {
						this.startLocat()
					} else {
						vk.alert("未开启权限，将无法使用部分功能~")
						this.$refs.paging.reload()
					}
				})
			} else {
				this.lonlat = adr
				this.$refs.paging.reload()
			}
		},
		// 定位
		startLocat() {
			//#ifdef H5
			vk.showLoading("获取中...")
			uni.getLocation({
				type: "wgs84",
				success: async res => {
					vk.hideLoading()
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.lonlat = [res.longitude, res.latitude]
					vk.callFunction({
						url: "client/pub.getH5City",
						title: "请求中...",
						data: { lonlat: [res.longitude, res.latitude] }
					}).then(res => {
						this.keyValue.location = res.city
						this.$refs.paging.reload()
					})
				},
				fail: err => {
					vk.hideLoading()
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
			//#ifdef APP-PLUS
			uni.getLocation({
				type: "gcj02",
				geocode: true,
				success: async res => {
					if (!res.address) {
						vk.alert("定位失败，请稍后重试~")
						return this.$refs.paging.reload()
					}
					vk.setStorageSync("adr", [res.longitude, res.latitude])
					this.lonlat = [res.longitude, res.latitude]
					this.keyValue.location = res.address.city
					this.$refs.paging.reload()
				},
				fail: () => {
					vk.alert("定位失败，请稍后重试~")
					this.$refs.paging.reload()
				}
			})
			//#endif
		},
		// 查询商技师列表
		queryList(pageIndex, pageSize) {
			const { name, lonlat, sid, from } = this
			vk.callFunction({
				url: "client/pub.queryShifu",
				data: { pageIndex, pageSize, name, sid, lonlat, from }
			}).then(res => {
				let now = vk.pubfn.timeFormat(new Date(), "hh:mm")
				let arr = res.rows || []
				arr.map(v => {
					const { shifu_time, agent_time, service_time } = v
					for (let i = 0; i < agent_time.length; i++) {
						let t = agent_time[i]
						let a = shifu_time.indexOf(t) === -1
						let b = service_time.indexOf(t) === -1
						if (t > now && a && b) {
							v.near = t
							return
						}
					}
					v.near = "暂无"
				})
				// arr = arr.sort((a, b) => {
				// 	return a.near > b.near ? 1 : -1
				// })
				this.$refs.paging.complete(res.rows)
			})
		},
		// 搜索
		search() {
			this.$refs.paging.reload()
		},
		inputing(e) {
			vk.pubfn.debounce(() => {
				if (!e) this.$refs.paging.reload()
			}, 500)
		},
		// 立即预约
		jump(item) {
			if (!this.from) {
				vk.redirectTo(`/pages/project/order-create?pid=${this.sid}&sid=${item._id}`)
			} else {
				const eventChannel = this.getOpenerEventChannel()
				if (eventChannel.emit) eventChannel.emit("update", item)
				vk.navigateBack()
			}
		},
		check(item) {
			vk.navigateTo(`/pages/shifu/detail?id=${item._id}&from=create`)
		}
	}
}
</script>

<style lang="scss" scoped>
.search {
	height: 80rpx;
	border-radius: 44rpx;
	background-color: #fff;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	position: relative;
	margin: 24rpx 20rpx 10rpx;
	.btn {
		width: 36rpx;
		height: 36rpx;
		margin-left: 42rpx;
	}
	&::after {
		content: "";
		display: inline-block;
		height: 30rpx;
		border-right: 1rpx solid #d1d1d1;
		position: absolute;
		right: 84rpx;
	}
}

.item {
	background-color: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
	margin: 20rpx;
	display: flex;
	align-items: center;
}

.info {
	padding-left: 22rpx;
	flex: 1;

	.title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.time {
		display: flex;
		align-items: flex-start;
		font-size: 24rpx;
		color: #999999;
		padding: 14rpx 0 26rpx;

		.u-icon {
			margin: 2rpx 6rpx 0 0;
		}

		.btn {
			font-size: 28rpx;
			color: #ffffff;
			padding: 6rpx 20rpx;
			background-color: #24c388;
			border-radius: 28rpx;
		}
	}

	.money {
		color: #999999;
		font-size: 24rpx;
		display: flex;
		align-items: flex-start;

		.now {
			color: #ff5555;
			font-size: 36rpx;
			font-weight: bold;
			margin-top: -4rpx;

			&::before {
				content: "￥";
				font-size: 24rpx;
				font-weight: normal;
			}
		}

		.base {
			text-decoration: line-through;
			margin: 0 8rpx;
			flex: 1;
		}
	}
}
</style>
